<script lang="ts" setup>
import { ref } from "vue"
import { ElDialog, ElMessage } from "element-plus"
import { knotBatchApi } from "@/api/bill"

const dialogVisible = ref<boolean>(false)

const data = ref<any[]>([])
const value = ref([])

//#region 打开弹窗
const showClick = (el: any) => {
  data.value = el

  dialogVisible.value = true
}

defineExpose({ showClick })
//#endregion

//#region 关闭弹窗
const handleClose = () => {
  data.value = []
  value.value = []
  dialogVisible.value = false
  emit("DialogClose", true)
}
const emit = defineEmits(["DialogClose"])
//#endregion

//#region 提交
const submit = () => {
  knotBatchApi({
    ids: value.value.join()
  }).then(() => {
    ElMessage.success("提交成功")
    handleClose()
  })
}
//#endregion
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    :show-close="false"
    title="账单"
    destroy-on-close
    draggable
    :before-close="handleClose"
    width="50%"
  >
    <el-transfer
      class="custom-transfer"
      v-model="value"
      :props="{
        key: 'id',
        label: 'company_name'
      }"
      filterable
      :titles="['可选', '已选']"
      :data="data"
    />
    <!-- {{ value }} -->
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit"> 提 交 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.custom-transfer {
  /* 调整宽度 */
  width: 100% !important; /* 或者具体的像素值，例如 600px */
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
